<template>
  <div class="pay-box">
    <div class="item-top">
      <img
        src="https://saas-oss.oss-cn-hongkong.aliyuncs.com/upload/20210419170909005.png"
        alt=""
        class="item-logo"
      />
      <div class="pay-top-item">
        <h2 class="tit iconBack">&nbsp;Filecoin有效算力|六十一期</h2>
        <div class="ipfsCount">
          总算力
          <span> 50.00000000 IPFS540 </span>
        </div>
        <div class="ipfsCount">
          <span class="tim"> 活动时间 </span
          ><span class="val"> 2021-04-19 17:20:00 ～ 2021-04-23 14:20:00 </span>
        </div>
        <div class="countdown">
          <span>倒计时</span>
          <div class="countdown-time">
            <span class="num bg-timer">3</span>
            <span class="unit">天 </span>
            <span class="num bg-timer">15</span>
            <span class="unit">小时 </span>
            <span class="num bg-timer">33</span>
            <span class="unit">分 </span>
            <span class="num bg-timer">29</span>
            <span class="unit">秒 </span>
          </div>
        </div>
        <div class="op-bottom">
          <div>
            <p class="price-title">价格</p>
            <p>
              <span class="price"> 2380 USDT </span
              ><span class="cny"> ≈ ￥16041.20 </span>
            </p>
          </div>
          <button
            class="common-button common-button-solid u-8-bg u-16-cl button"
            style="
              height: 0.4rem;
              padding-left: 0.2rem;
              padding-right: 0.2rem;
              margin-top: 0px;
            "
          >
            <div class="common-button-slot">
              <span> 立即购买 </span>
            </div>
          </button>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  methods: {},
  data () {
    return {}
  }
}
</script>
<style lang="scss" scoped>
.pay-box {
  padding: 15px;
  .item-top {
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    .item-logo {
      height: 182px;
      width: 100%;
    }
    .iconBack {
      font-size: 16px;
      color: #333;
      font-weight: 600;
      line-height: 0;
    }
    .ipfsCount {
      color: #A5A5A5;
      font-size: 13px;
      padding: 5px 0;
    }
    .pay-top-item {
      margin: 10px;
    }
  }
}
</style>
